<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
  <div class="ui-mode-container ui-mode-box flex-col">

  </div>
</template>
<script>
import mixinCommon from "@/views/content/mixins/common";
import mixinRequest from "@/views/content/mixins/request";
import { formatDate } from "@/utils/tool";
import { Popup, Toast } from "vant";
export default {
  name: "home",
  data() {
    return {
      public_agent_info: {},
      public_user_info: {},
      showMoreList: false,
      startY: 0,
      itemStartX: 0,
      //
      todayDrinkList: [],
      drinkConfigInfo: null,
      // 每日目标
      mid_table_remark_001: "",
      isRequesting: false,
    };
  },
  mixins: [mixinCommon, mixinRequest],
  components: {
    [Popup.name]: Popup,
  },
  computed: {
    showToday() {
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let dtnow = new Date();
      var week = dtnow.getDay();
      let day = formatDate(dtnow, "MM月DD日");
      return `${weekArr[week]},${day}`;
    },
    todayDrink() {
      let total = 0;
      for (let i = 0; i < this.todayDrinkList.length; i++) {
        const element = this.todayDrinkList[i];
        total += parseInt(element.mid_table_remark_007);
      }
      return total;
    },
    progresspercent() {
      if (this.mid_table_remark_001) {
        let per = parseInt((this.todayDrink * 100) / this.mid_table_remark_001);
        if (per > 100) {
          per = 100;
        }
        return per;
      }
      return 0;
    },
    showDrinkType() {
      if (this.drinkConfigInfo && this.drinkConfigInfo.mid_table_remark_003) {
        return this.drinkConfigInfo.mid_table_remark_003;
      }
      return "水";
    },
    showContainerSize() {
      if (this.drinkConfigInfo && this.drinkConfigInfo.mid_table_remark_002) {
        return `${this.drinkConfigInfo.mid_table_remark_002}ml`;
      }
      return "0ml";
    },
  },
  filters: {
    showDrinkTime(val) {
      if (!val) {
        return "";
      }

      let tmpTitle = "上午：";
      let time = new Date(parseInt(val));

      let tmpDate = formatDate(time, "YYYY/MM/DD");
      let tmpTime = formatDate(time, "hh:mm:ss");
      let currentTime = new Date(`${tmpDate} ${tmpTime}`);
      let compareTime = new Date(`${tmpDate} 12:00:00`);
      if (compareTime < currentTime) {
        tmpTitle = "下午：";
      }
      let tmpTimeArr = tmpTime.split(":");
      let tmpHour = parseInt(tmpTimeArr[0]);
      if (tmpHour >= 12) {
        tmpHour = tmpHour - 12;
      }
      let result = `${tmpTitle}${tmpHour > 10 ? tmpHour : `0${tmpHour}`}:${
        tmpTimeArr[1]
      }`;
      return result;
    },
  },
  watch: {
    resourceLoaded: {
      handler(flag) {
        flag && this.$nextTick(this.init);
      },
      immediate: true,
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    // 今日记录拖动处理
    touchstartList(e) {
      e.preventDefault();
      let startY = e.touches[0].pageY;
      this.startY = startY;
    },
    touchMoveList(e) {
      let moveEndY = e.changedTouches[0].pageY;
      let Y = moveEndY - this.startY;
      if (Y > 0) {
        this.showMoreList = false;
      } else if (Y < 0) {
        this.showMoreList = true;
      }
    },
    // 今日记录拖动删除
    touchstartItem: function (e, item) {
      let startX = e.touches[0].pageX;
      this.itemStartX = startX;
    },
    touchMoveItem: function (e, item) {
      let moveEndX = e.changedTouches[0].pageX;
      let X = moveEndX - this.itemStartX;
      if (X > 0) {
        item.showDel = false;
      } else if (X < 0) {
        item.showDel = true;
      }
    },

    // 初始化
    init() {
      this.getShopInfo()
        .then(({ result, response }) => {
          // 获取用户喝水记录
          this.getUserDrinkInfo();
        })
        .catch(({ msg }) => {
          this.showResult(msg, true);
        });
    },

    // 获取门店信息
    getShopInfo() {
      return new Promise((resolve, reject) => {
        this.$http
          .post({
            name: "common.shop.info",
            data: {
              invoke_method: "user_and_shop_info",
            },
            loading: {
              enabled: false,
            },
          })
          .then(({ result, response }) => {
            this.public_agent_info = result.public_agent_info || {};
            this.public_user_info = result.public_user_info || {};
            this.setState({
              key: "public_agent_info",
              value: this.public_agent_info,
            });
            this.setState({
              key: "public_user_info",
              value: this.public_user_info,
            });
            resolve({ result, response });
          })
          .catch(({ msg }) => {
            reject({ msg });
          });
      });
    },
    // 获取用户饮水目标以及用户饮水列表
    getUserDrinkInfo() {
      let paras = {
        invoke_method: "public_load_middle_table_list",
        pre_db_para_middle_table_name:
          "public_middle_table_lite_mod_health_reminder",
        type_middle_app: 171001,
        type_inner_app: 1001,
        is_online: 0,
        id_public_user_info: this.public_user_info.id_public_user_info,
      };
      var today = formatDate(new Date(), "YYYY-MM-DD").replace(/-/g, "");

      Promise.all([
        this.$http.post({
          name: "common.collect",
          data: Object.assign({}, paras, { mid_table_remark_040: today,type_middle_app: 173001 }),
          login: {
            redirect: false,
          },
          loading: {
            enabled: false,
          },
        }),
        this.$http.post({
          name: "common.collect",
          data: paras,
          login: {
            redirect: false,
          },
          loading: {
            enabled: true,
          },
        }),
      ])
        .then((resArr) => {
          // 今日记录
          let resList = resArr[0];
          this.processTodayList(resList);
          // 配置信息
          let resConf = resArr[1];
          this.drinkConfigInfo =
            resConf && resConf.result && resConf.result.page_content
              ? resConf.result.page_content[0]
              : null;
          this.mid_table_remark_001 =
            this.drinkConfigInfo && this.drinkConfigInfo.mid_table_remark_001
              ? this.drinkConfigInfo.mid_table_remark_001
              : 0;
          this.showContent();
        })
        .catch(({ msg }) => {
          this.showResult(msg, true);
        });
    },
    getDrinkList() {
      var today = formatDate(new Date(), "YYYY-MM-DD").replace(/-/g, "");
      let paras = {
        invoke_method: "public_load_middle_table_list",
        pre_db_para_middle_table_name:
          "public_middle_table_lite_mod_health_reminder",
        type_middle_app: 173001,
        type_inner_app: 1001,
        is_online: 0,
        id_public_user_info: this.public_user_info.id_public_user_info,
        mid_table_remark_040: today,
      };
      this.$http
        .post({
          name: "common.collect",
          data: paras,
          login: {
            redirect: false,
          },
          loading: {
            enabled: false,
          },
        })
        .then(({ result, response }) => {
          // 今日记录
          this.processTodayList({ result, response });
        })
        .catch(({ msg }) => {
          this.showResult(msg, true);
        });
    },
    processTodayList(resList) {
      let todayDrinkList =
        resList && resList.result && resList.result.page_content
          ? resList.result.page_content
          : [];
      for (let i = 0; i < todayDrinkList.length; i++) {
        const element = todayDrinkList[i];
        element.showDel = false;
      }
      this.todayDrinkList = todayDrinkList;
    },
    // 请求失败刷新
    handleRefresh() {
      this.init();
    },

    // 喝水
    handleDrink() {
      if (this.isRequesting) {
        return;
      }
      this.isRequesting = true;
      if (
        !this.public_user_info ||
        !this.public_user_info.id_public_user_info
      ) {
        this.isRequesting = false;
        Toast("用户未登录");
        return;
      }
      if (!this.mid_table_remark_001) {
        this.isRequesting = false;
        Toast("请在我的页面配置每日目标");
        return;
      }
      if (!this.drinkConfigInfo || !this.drinkConfigInfo.mid_table_remark_002) {
        this.isRequesting = false;
        Toast("请先编辑容器");
        return;
      }
      let dtnow = new Date();
      this.$http
        .post({
          name: "common.collect",
          data: {
            invoke_method: "public_insert_or_update_middle_table",
            pre_db_para_middle_table_name:
              "public_middle_table_lite_mod_health_reminder",
            id_public_user_info: this.public_user_info.id_public_user_info,
            mid_table_remark_007: this.drinkConfigInfo.mid_table_remark_002,
            mid_table_remark_008: this.drinkConfigInfo.mid_table_remark_003
              ? this.drinkConfigInfo.mid_table_remark_003
              : "水",
            mid_table_remark_009: this.public_user_info.nick_name,
            mid_table_remark_010: this.public_user_info.user_phone,
            mid_table_remark_011: this.public_user_info.weichat_img,
            mid_table_remark_040: formatDate(
              new Date(dtnow),
              "YYYY-MM-DD"
            ).replace(/-/g, ""),
            mid_table_remark_041: formatDate(
              new Date(dtnow),
              "YYYY-MM"
            ).replace(/-/g, ""),
            mid_table_remark_042: formatDate(new Date(dtnow), "YYYY"),
            mid_table_remark_043: dtnow.getTime(),
            type_middle_app: 173001,
            type_inner_app: 1001,
            is_online: 0,
          },
          login: {
            redirect: false,
          },
          loading: {
            enabled: true,
          },
        })
        .then(({ result, response }) => {
          this.isRequesting = false;
          this.showMessage("保存成功").then(() => {
            this.getDrinkList();
          });
        })
        .catch(({ msg }) => {
          this.isRequesting = false;
          this.showMessage(msg);
        });
    },
    handleDel(item) {
      if (!item || !item.id_public_middle_table) {
        return;
      }
      if (this.isRequesting) {
        return;
      }
      this.isRequesting = true;
      this.$http
        .post({
          name: "common.collect",
          data: {
            invoke_method: "public_insert_or_update_middle_table",
            pre_db_para_middle_table_name:
              "public_middle_table_lite_mod_health_reminder",
            pre_db_para_id_public_middle_table: item.id_public_middle_table,
            type_middle_app: 173001,
            type_inner_app: 1001,
            is_online: 111,
          },
          login: {
            redirect: false,
          },
          loading: {
            enabled: true,
          },
        })
        .then(({ result, response }) => {
          this.isRequesting = false;
          this.showMessage("删除成功").then(() => {
            this.getDrinkList();
          });
        })
        .catch(({ msg }) => {
          this.isRequesting = false;
          this.showMessage(msg);
        });
    },
    // 跳转选择容器
    handleChooseCup() {
      if (
        !this.public_user_info ||
        !this.public_user_info.id_public_user_info
      ) {
        Toast("用户未登录");
        return;
      }
      this.$router.push({
        path: "/editcontainer",
      });
    },
  },
  beforeDestroy() {},
};
</script>
<style lang="less" scoped>
/deep/.ui-header-item {
  background: #f6f7fb;
}
.ui-mode-container {
  //   background-color: #fff;
  background-color: #f6f7fb;
  .home-wrap {
    // padding: 0.85rem 0.85rem 5.33rem 0.85rem;
    padding-bottom: 0.53rem;
    background: #fff;
    .date-week-box {
      position: relative;
      width: 100%;
      padding-top: 0.74rem;
      padding-left: 0.8rem;
      font-size: 0.74rem;
      line-height: 1rem;
      box-sizing: border-box;
      color: #101010;
    }
    .tip-today {
      position: relative;
      width: 100%;
      font-size: 0.9rem;
      line-height: 1.28rem;
      padding-left: 0.8rem;
      box-sizing: border-box;
      color: #101010;
    }
    .water-box {
      position: relative;
      width: 10.08rem;
      height: 10.08rem;
      overflow: hidden;
      margin: 0.69rem auto 0.48rem;
      .water-icon {
        width:100%;
        height: 100%;
        // transform: translateX(10.08rem);
        // filter: drop-shadow(#5ac8fa -10.08rem 0px 0px);
      }
      .today-total {
        position: absolute;
        width: 100%;
        font-size: 1.92rem;
        color: #fff;
        text-align: center;
        top: 4.1rem;
        font-weight: 700;
        .unit {
          font-size: 0.74rem;
        }
      }
    }
    .progress-box {
      position: relative;
      width: 100%;
      padding-left: 0.96rem;
      padding-right: 0.96rem;
      box-sizing: border-box;
      .progress-value {
        font-size: 0.74rem;
        line-height: 1.06rem;
      }
      .progress-main-box {
        position: relative;
        width: 100%;
        height: 1.6rem;
        padding-top: 0.67rem;
        box-sizing: border-box;
        .cont-progress-box {
          position: absolute;
          width: 100%;
          height: 0.26rem;
          border-radius: 0.13rem;
          background: #e5e5e5;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -wekbit-transform: translate(-50%, -50%);
          .cont-progress-box-black {
            position: absolute;
            width: 100%;
            height: 0.26rem;
            border-radius: 0.13rem;
            background: #17151c;
          }
        }
        .progress-value-box {
          position: absolute;
          width: calc(100% - 2.13rem);
          height: 1.6rem;
          padding-top: 0.67rem;
          box-sizing: border-box;
          background: transparent;
          top: 0;
          left: 0;
        }
        .cont-progress-value {
          position: absolute;
          width: 2.13rem;
          height: 0.8rem;
          line-height: 0.8rem;
          text-align: center;
          background: #17151c;
          color: #fff;
          font-size: 0.64rem;
          border-radius: 0.4rem;
          left: 50%;
          transform: translate(0, -50%);
          -webkit-transform: translate(0, -50%);
        }
      }
      .tip-progress {
        font-size: 0.74rem;
        line-height: 1.06rem;
      }
    }
    .btn-drink {
      position: relative;
      width: 18.08rem;
      height: 2.5rem;
      line-height: 2.5rem;
      margin: 1.25rem auto 1.38rem;
      border-radius: 0.26rem;
      background: #ec4040;
      color: #fff;
      font-size: 0.96rem;
      .icon-add-box {
        position: relative;
        width: 1.06rem;
        height: 1.06rem;
        overflow: hidden;
        // border: 1px solid #fff;
        border-radius: 50%;
        box-sizing: border-box;
        margin-right: 0.53rem;
        .icon-add {
          position: absolute;
          width: 1.06rem;
          height: 1.06rem;
          top: 0;
          // width: 0.7rem;
          // height: 0.7rem;
          // top: 50%;
          // left: 50%;
          // transform: translate(-50%, -50%);
          // -webkit-transform: translate(-50%, -50%);
        }
      }
    }
    .container-value-box {
      position: relative;
      width: 18.08rem;
      margin: 0 auto;
      .icon-value-box {
        position: relative;
        .icon-plate {
          width: 1.7rem;
          height: 1.7rem;
          margin-right: 0.85rem;
        }
        .unit-value-water {
          color: #101010;
          .unit-water {
            font-size: 0.9rem;
            line-height: 1.28rem;
          }
          .value-water {
            font-size: 0.74rem;
            line-height: 1rem;
          }
        }
      }
      .btn-edit-container {
        position: relative;
        width: 3.94rem;
        height: 1.7rem;
        line-height: 1.7rem;
        text-align: center;
        border: 1px solid #d9d9d9;
        font-size: 0.74rem;
        color: #101010;
        border-radius: 0.26rem;
      }
    }
  }
  .bottom-popup {
    position: relative;
    width: 100%;
    height: 11.57rem;
    background: #fff;
    border-top-left-radius: 1.06rem;
    border-top-right-radius: 1.06rem;
    margin-top: 0.8rem;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;

    .drink-today-wrap {
      position: relative;
      width: 18.08rem;
      flex: 1;
      height: 0%;
      margin: 0 auto;
      overflow: auto;
    }
  }
  .home-none-wrap {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    .home-none-icon {
      width: 8.8rem;
      height: 8.75rem;
      display: block;
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url(~@/assets/images/common_none_icon.png);
    }
    .home-none-text {
      margin-top: 1.04rem;
      line-height: 1.2em;
      font-size: 0.85rem;
      font-weight: bolder;
      color: #878787;
      text-align: center;
      .home-none-text-tip {
        margin-top: 0.64rem;
        font-size: 0.69rem;
      }
    }
  }
}

.drink-item-wrap {
  position: relative;
  width: 100%;
  height: 4.16rem;
  border-bottom: 1px solid rgba(187, 187, 187, 0.43);
  box-sizing: border-box;
  flex-shrink: 0;
  &:last-child {
    border-bottom: 0;
  }
  .drink-item-icon-time-type {
    .drink-item-icon {
      width: 1.7rem;
      height: 1.7rem;
      margin-right: 0.85rem;
    }
    .drink-item-time-type {
      position: relative;
      font-size: 0.9rem;
      line-height: 1.28rem;
      color: #101010;
    }
  }
  .drink-item-value {
    position: relative;
    font-size: 0.96rem;
    line-height: 1.33rem;
    color: #101010;
  }
  
}
.drag-box {
  position: relative;
  width: 100%;
  height: 3.57rem;
  padding-top: 0.74rem;
  text-align: center;
  box-sizing: border-box;
  .icon-drag-box {
    position: relative;
    width: 2.66rem;
    height: 0.21rem;
    border-radius: 0.1rem;
    margin: 0 auto 0.8rem;
    background: #e5e5ea;
  }
  .tip-drag-box {
    position: relative;
    width: 100%;
    font-size: 0.96rem;
    line-height: 1.33rem;
    color: #aeaeb2;
    text-align: center;
  }
}
.list-dialog {
  position: fixed;
  width: 100%;
  // height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  height: calc(
    100% - 2.67rem - constant(safe-area-inset-bottom)
  ); //兼容 IOS<11.2
  height: calc(100% - 2.67rem - env(safe-area-inset-bottom)); //兼容 IOS>11.2
  bottom: calc(2.67rem + constant(safe-area-inset-bottom)); //兼容 IOS<11.2
  bottom: calc(2.67rem + env(safe-area-inset-bottom)); //兼容 IOS>11.2
  .list-dialog-main {
    position: fixed;
    width: 100%;
    height: calc(
      90% - 2.67rem - constant(safe-area-inset-bottom)
    ); //兼容 IOS<11.2
    height: calc(90% - 2.67rem - env(safe-area-inset-bottom)); //兼容 IOS>11.2
    bottom: calc(2.67rem + constant(safe-area-inset-bottom)); //兼容 IOS<11.2
    bottom: calc(2.67rem + env(safe-area-inset-bottom)); //兼容 IOS>11.2

    background: #fff;
    border-top-left-radius: 1.06rem;
    border-top-right-radius: 1.06rem;
    box-sizing: border-box;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    .list-drink-today-wrap {
      position: relative;
      // width: 18.08rem;
      width: 100%;
      flex: 1;
      height: 0%;
      margin: 0 auto;
      overflow-y: auto;
      overflow-x:hidden;
      .drink-item-wrap {
        position: relative;
        width: 19.04rem;
        // margin: 0 auto;
        margin-left:0.96rem;
        padding-right: 0.96rem;
        box-sizing: border-box;
      }
    }
  }
}
.data-empty-wrap {
  position: relative;
  width: 100%;
  text-align: center;
  .app_result-icon {
    margin-top: 1.28rem;
    margin-bottom: 1.28rem;
    width: 6.4rem;
    font-size: 6rem;
    line-height: 5rem;
    color: #ccc;
  }
  .msg {
    font-size: 0.8rem;
    color: #666;
    line-height: 2rem;
    text-align: center;
  }
}

.drink-item-wrap-box {
  position: relative;
  width: 23rem;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  .drink-item-wrap{
    width:20rem
  }
  .btn-del {
    position: relative;
    width: 3rem;
    height: 4.16rem;
    line-height: 4.16rem;
    text-align: center;
    background: red;
    text-align: center;
    border-bottom: 1px solid rgba(187, 187, 187, 0.43);
    box-sizing: border-box;
    // right: -3.5rem;
    color: #fff;
    font-size: 0.53rem;
    font-weight: 700;
    // bottom: 0;
    z-index: 10;
    flex-shrink: 0;
  }
}
</style>